/**
 *@author：yanghx
 *@Date: 2020/2/8 22:14
 */
import React from 'react';
import {StyleSheet, ScrollView, Text, View, Image} from 'react-native';
// 现在PropTypes不在react中
import PropTypes from 'prop-types';
import {Icon, List, Modal} from '@ant-design/react-native';
import {settingConfig} from '@page/tabbar/component/userCenter/UserCenterConstant';

const Item = List.Item;

export default class TabBarUserCenterPage extends React.Component {
  constructor(props) {
    super(props);
    this.state = {};
  }

  static propTypes = {test: PropTypes.string};

  onClick = name => {
    if (name !== '相册') {
      Modal.alert('功能正在开发中', '请关闭', [
        {
          text: '关闭',
          onPress: () => {
            console.log('cancel');
          },
          style: 'cancel',
        },
        {text: 'OK', onPress: () => console.log('ok')},
      ]);
    }
  };

  render() {
    const listItems = settingConfig.map(item => {
      return (
        <Item
          thumb={<Icon name={item.icon} size="md"/>}
          arrow="horizontal"
          onPress={() => {
            this.onClick(item.title);
          }}>
          {'  ' + item.title}
        </Item>
      );
    });

    return (
      <View style={styles.container}>
        <UserInfo/>

        <View style={styles.settings}>
          <ScrollView
            style={{flex: 1, backgroundColor: '#f5f5f9'}}
            automaticallyAdjustContentInsets={false}
            showsHorizontalScrollIndicator={false}
            showsVerticalScrollIndicator={false}>
            <List renderHeader={'配置项'}>{listItems}</List>
          </ScrollView>
        </View>
      </View>
    );
  }
}

const UserInfo = () => {
  return (
    <View style={styles.userInfo}>
      <View>
        <Image
          style={{
            width: 80,
            height: 80,
            marginLeft: 10,
            borderRadius: 10,
            borderColor: 'red',
            borderWidth: 1,
          }}
          source={require('../../../../../asset/bbbb.png')}
        />
      </View>
      <View style={{marginLeft: 20}}>
        <Text style={{fontSize: 33}}>云豪</Text>
        <Text>电商中心</Text>
      </View>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#ffffff',
  },
  userInfo: {
    flex: 2,
    justifyContent: 'flex-start',
    alignItems: 'center',
    flexDirection: 'row',
  },
  settings: {
    flex: 5,
  },
});
